iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 2
1
Modern Web

菜雞用 Phaser 拾起童年遊戲 系列 第 2

菜雞用 Phaser 拾起童年遊戲 02

  • 分享至 

  • xImage
  •  

Phaser 是一個免費的2D遊戲框架,用於製作HTML5遊戲,是由 Photon Storm 所開發的。

Phaser 是什麼?

Phaser是一個HTML5遊戲框架,旨在幫助開發人員真正快速地製作功能強大的跨瀏覽器HTML5遊戲。它是專門為利用台式機和移動設備現代瀏覽器的優勢而創建的。瀏覽器唯一的要求是對canvas標籤的支持。

開發環境

  • 一套你慣用的編輯器
    • 不管使用哪個編輯器,只要簡單的HTML、CSS、Javascript就可以完成 Phaser 的撰寫,甚至如果你要全部寫在HTML也是可以的喔!
    • 筆者則是使用 VSCode ,因為他有live server 外掛可以直接使用 :P
  • 一個瀏覽器
    • 基本上 Phaser 是可以支援跨瀏覽器的,所以選擇你所喜愛的瀏覽器即可唷!
    • 筆者是使用 Google Chrome
  • 一個準備好開啟遊戲之旅的心,一起來找回童年回憶!

起手式

由於我們做的 Phaser 肯定是需要加載一些圖片、聲音檔、JSON,甚至是 Javascript,所以我們必須為此有個 web server ,要透過 http:// 來進行溝通及加載,可以跟筆者一樣偷懶使用 live server 外掛,或者使用node.js來啟動一個 web server。

先在本地開啟一個 html 將以下程式貼上去,啟動你的 web server 看看有沒有畫面:

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/phaser@3.15.1/dist/phaser-arcade-physics.min.js"></script>
</head>
<body>

    <script>
    var config = {
        type: Phaser.AUTO,
        width: 800,
        height: 600,
        physics: {
            default: 'arcade',
            arcade: {
                gravity: { y: 200 }
            }
        },
        scene: {
            preload: preload,
            create: create
        }
    };

    var game = new Phaser.Game(config);

    function preload ()
    {
        this.load.setBaseURL('http://labs.phaser.io');

        this.load.image('sky', 'assets/skies/space3.png');
        this.load.image('logo', 'assets/sprites/phaser3-logo.png');
        this.load.image('red', 'assets/particles/red.png');
    }

    function create ()
    {
        this.add.image(400, 300, 'sky');

        var particles = this.add.particles('red');

        var emitter = particles.createEmitter({
            speed: 100,
            scale: { start: 1, end: 0 },
            blendMode: 'ADD'
        });

        var logo = this.physics.add.image(400, 100, 'logo');

        logo.setVelocity(100, 200);
        logo.setBounce(1, 1);
        logo.setCollideWorldBounds(true);

        emitter.startFollow(logo);
    }
    </script>

</body>
</html>

如果有看到以下畫面(一個移動中的Phaser logo),代表你的旅程要準備開始了XD

總結

相信大家對於 Phaser 有一些初步的了解,明天就開始講解一些基本的應用囉!

tags: Phaser Game 2020鐵人賽

上一篇
菜雞用 Phaser 拾起童年遊戲 01
下一篇
菜雞用 Phaser 拾起童年遊戲 03
系列文
菜雞用 Phaser 拾起童年遊戲 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言